<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.div01 {
				width: 240px;
				height: 270px;
				/*border: 2px solid gainsboro;*/
				margin: 100px auto;
				float: left;
				margin-right: 10px;
			}
			/*图片缩放会覆盖其他标签，使用一个大小和图片一样的div包裹起来。然后使用overflow: hidden;
			 重点：图片宽高设置和div一样。
			 * */
			.div01>div{
				width: 240px;
				height: 138px;
				overflow: hidden;
			}
			.div01>div>img {
				width: 240px;
				height: 138px;
				transition: all 0.3s;
			}
			.div01:hover>div>img {
				transform: scale(1.2);
			}
			.div01:hover{
				box-shadow: 1px 2px 10px gray;
			} 
		</style>

	</head>
	<body>
		<div class="div01">
			<div>
				<img src="MOOC/36BC1F265CE3928FB14E508437213477.jpg" />
			</div>

			<p>随便写点什么</p>
		</div>
		<div class="div01">
			<div>
				<img src="MOOC/36BC1F265CE3928FB14E508437213477.jpg" />
			</div>

			<p>随便写点什么</p>
		</div>
		
		<div class="div01">
			<div>
				<img src="MOOC/36BC1F265CE3928FB14E508437213477.jpg" />
			</div>

			<p>随便写点什么</p>
		</div>

	</body>

</html>